<style scoped>
</style>
<template>
<div class="eidtmore-box">
    <h1>{{ name }} &nbsp; &nbsp; &nbsp;
                    <el-button
                      size="mini"
                      icon="el-icon-plus"
                      type="default"
                      circle
                      @click="add">
                    </el-button>
                    <el-button
                      size="mini"
                      icon="el-icon-check"
                      type="success"
                      circle
                      @click="save" v-if="api && saveapi">
                    </el-button>
    </h1>
    <div class="inbox"> 
    <table class="border"  cellpadding="0" cellspacing="0">
      <slot name="head"></slot>
      <tbody v-if="loading">
        <tr>
          <td colspan="20" class="tc">          
            <i class="fa el-icon-loading fa-spin"></i>
          </td>
        </tr>
      </tbody>
      <tbody v-else>          
        <slot name="item"
              v-for="(item, index) in data"
              :item="item" :index="index">
        </slot>          
      </tbody>
    </table>
    </div>
  </div>
</template>
<script>
  export default {
    props: ['name', 'initdata', 'newdata', 'saveapi', 'api', 'params'],
    data () {
      return {
        data: [],
        loading: false
      }
    },
    mounted () {
      let that = this
      this.getlist()
    },
    watch: {
      params: {
        handler (newValue, oldValue) {
          this.getlist()
        },
        deep: true
      },
      initdata: {
        handler (newValue, oldValue) {
          this.getlist()
        },
        deep: true
      }
    },
    methods: {
      getData () {
        return this.data
      },
      up (index) {
        this.data.up(index)
      },
      down (index) {
        this.data.down(index)
      },
      add () {
        let a = {}
        for (let i in this.newdata) {
          a[i] = this.newdata[i]
        }
        this.data.push(a)
      },
      save (item) {
        let that = this
        that.loading = true
        that.postData = Object.assign(that.params || {}, {})
        that.postData['data'] = that.data
        that.$api.post(that.saveapi, that.postData).then((res) => {
          if (res.status === 1) {
            that.$success(res.msg)
            that.getlist()
          } else {
            that.$error(res.msg)
          }
          that.loading = false
        })       
      },
      del (index) {
        this.data.splice(index, 1)
        this.$emit('load')
      },
      getlist () {
        let that = this
        that.data = []
        if (that.initdata && that.initdata.length > 0) {
          that.initdata.map((item) => {
            this.data.push(item)
          })
        }
        if (that.api) {
          that.loading = true
          that.$api.get(that.api, that.params).then((res) => {
            if (res.status === 1) {
              that.data = res.data.list || res.data || []
              that.$emit('load')
            }
            this.loading = false
          })
        }
      }
    }
  }
</script>
<style scoped lang="scss">
.eidtmore-box .inbox > table {width:100%;margin:0 auto;border:0;margin:0;border-collapse:collapse;border-spacing:0;}
.eidtmore-box .inbox > table tr th {color:#ccc; font-weight: 400;text-align: left;}
.eidtmore-box .inbox > table tr th,.eidtmore-box .inbox > table tr td{padding:7px 13px;font-size: 12px;}
</style>
